<template>
    <van-nav-bar
        title="购物车"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        v-if="action == 'cart'"
    />

    <van-nav-bar
        title="购物车"
        v-else
    />

    <van-checkbox-group v-model="checked" ref="checkboxGroup">
    <!-- <van-checkbox name="a">复选框 a</van-checkbox>
    <van-checkbox name="b">复选框 b</van-checkbox> -->
    <van-swipe-cell v-for="item of CartData" :key="item.id">
        <van-card
            :price="item.total"
            :title="item.product.name"
            class="goods-card"
        >
            <template #thumb>
                <van-checkbox :name="item.id"></van-checkbox>
                <img :src="item.product.cover_cdn" alt="">
            </template>

            <template #num>
                <van-stepper v-model="item.nums" :name="item.id" theme="round" @change="onChageNum" button-size="22" disable-input />
            </template>

            <template #tags>
                <span>x {{item.nums}}</span>
            </template>
        </van-card>
        <template #right>
            <van-button square text="删除" type="danger" @click="ondel(item.id)" class="delete-button" />
        </template>
    </van-swipe-cell>
    </van-checkbox-group>

    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" :class="action != 'cart' ? 'bottom' : ''">
        <van-checkbox v-model="checkAll" @click="toggleAll" checked-color="#ff0011" v-if="checked.length > 0">取消全选</van-checkbox>
        <van-checkbox v-model="checkAll" @click="toggleAll" v-else>全选</van-checkbox>
    </van-submit-bar>

    <Menu v-if="action != 'cart'" />
</template>
<script>
import Menu from 'components/common/Menus.vue'
import { ref } from 'vue';
export default {
    components:{
        Menu
    },
    created() {
        let action = this.$route.query.action

        this.action = action

        this.CartList()
    },
    data() {
        return {
            action:'',
            LoginUser:this.$cookies.get('LoginUser'),
            CartData:[],
            checked:[],
            checkAll:false,
        }
    },
    computed:{
        total()
        {
            if(this.checked.length <= 0)
            {
                return 0
            }

            let total = 0

            for(let item of this.CartData)
            {
                if(this.checked.includes(item.id))
                {
                    total += parseFloat(item.total)
                }
            }

            return total * 100
        }
    },
    methods: {
        // 顶部返回
        onClickLeft()
        {
            this.$router.go(-1)
        },
        // 异步请求
        async CartList()
        {
            // 获取用户id
            let data = {
                userid:this.LoginUser.id
            }
            // 同步回来
            let result = await this.$api.CartIndex(data)

            // 判定是否登录
            if(result.code === 0)
            {
                this.$notify({
                    type: "danger",
                    message: result.msg,
                    duration:1500
                });
                return false
            }
            // 进行加入操作
            this.CartData = result.data.CartList


        },
        onSubmit()
        {
            if(this.checked.length <= 0)
            {
                this.$notify({
                    type: "danger",
                    message: '请选择结算的商品',
                    duration:1500
                });
                return false
            }

            let ids = this.checked.join(',')

            this.$router.push({path:'/product/cart/confirm',query:{ids:ids}})
            // 使用cookies来进行id的获取
            // this.$cookies.set('LIsee',ids)
            // this.$router.push('/product/cart/confirm')
            
        },
        ondel(id)
        {

        },
        toggleAll()
        {
            if(this.checked.length > 0)
            {
                this.$refs.checkboxGroup.toggleAll(false)
            }else{
                this.$refs.checkboxGroup.toggleAll(true)
            }
        },
        // 单选时修改全选/取消的状态
        oncheck()
        {
            if(this.checked.length)
            {
                this.checkAll = true
            }else{
                this.checkAll = false
            }
        },
        async onChageNum(value,name)
        {
            // console.log(value,name)
            let data = {
                nums:value,
                id:name.name
            }

            let result = await this.$api.CartNums(data)

            // console.log(result)

            this.CartList()
        }
    }
            
}
</script>

<style>
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }

  .van-card__thumb{
    display: flex;
    width: auto;
  }

  .van-card__thumb img{
    width: 88px;
    margin-left: 10px;
  }

  .van-submit-bar{
    bottom: 65px;
  }
</style>